import { useEffect, useState } from "react"

export const Search = ()=>{
    const list = [{id:1,name:'上衣'},
                {id:2,name:'裤子'},
                {id:3,name:'袜子'},
                {id:4,name:'内衣'},
                {id:5,name:'内裤'},
                {id:6,name:'鞋子'},
                {id:7,name:'毛衣'},
                {id:8,name:'外套'},
                {id:9,name:'羽绒服'},]
                const list2 = [{id:1,name:'五粮液'},
                {id:2,name:'舍得酒'},
                {id:3,name:'茅台酒'},
                {id:4,name:'啤酒'},
                {id:5,name:'中国梦'},
                {id:6,name:'喜之郎'},
                {id:7,name:'碎冰冰'},
                {id:8,name:'阿尔卑斯'},
                {id:9,name:'卑尔维斯'},]
    const [keyword,setKeyword] = useState('')
    const [filterList,setFilterList] = useState(list)
    const [state,setState] = useState('1')



    const onInput = (e)=>{
        setKeyword(e.target.value)
    }

    useEffect(()=>{
const newList = list.filter(o=>o.name.includes(keyword))
setFilterList(newList)
    },[keyword])

    return(<>
    <h1>搜索功能</h1>
    搜索：<input type="text"  onChange={(e)=>onInput(e)}/>
    <div style={{border:'1px solid black',width:200,marginTop:20}}>
    {filterList.map(o=>(<div key={o.id} >{o.name}</div>))}
    </div>
    </>)
}